<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1, min-scale=1,user-scalable=no">
    <meta name="_token" content="{{ csrf_token() }}"/>



    <link href="{{env('CDN_RESOURCE')}}/css/mobile/mobile.css?v={{config('app.version')}}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">

    <title>Qkids久趣英语</title>

</head>
<body >

<div
    style="height: 40px; background: red; color: white; font-size: 16px; text-align: center; line-height: 40px;"
>【推荐赠课】将于2018年3月18日22:00下线</div>
<div class="bonus-bg">
    <img src="{{env('CDN_RESOURCE')}}/img/mobile/campaign/bg.png">

</div>

{{--<div class="camp-header">--}}
    {{--<div class="left-arrow-icon"></div>--}}
    {{--<div class="title">久趣英语</div>--}}
{{--</div>--}}

{{--<div class="wrapper">--}}
    <div class="camp-slogan">
        {{--<div class="up">每成功推荐一名好友</div>--}}
        {{--<div class="down">最多可得 <span>11</span> 课时 </div>--}}
        {{--<img class="left"  src="{{env('CDN_RESOURCE')}}/img/mobile/campaign/left.png">--}}
        {{--<img class="right" src="{{env('CDN_RESOURCE')}}/img/mobile/campaign/right.png">--}}
        {{--<div style="font-size: 12px; color: white; margin-top: 5px;">活动自2017年11月09日起生效</div>--}}
    </div>

    <div class="rule">
        <div class="item">
            <div class="up">
                <div class="onelesson-icon">+1</div>
                <div class="h">获取1课时</div>
            </div>

            <div class="down">
                新用户通过您的分享链接注册，并报名「100元4课时」，推荐人可得1课时。
            </div>
        </div>

        <div class="item">
            <div class="up">
                <div class="tenlesson-icon">+1</div>
                <div class="h">获取10课时</div>
            </div>

            <div class="down">
                若被推荐用户后续首次报名「长期课」(包括长期课团购)，推荐人可再得10课时。
            </div>
        </div>

        <div class="item">
            <div class="up">
                <div class="tips-icon">+1</div>
                <div class="lt">获赠课时限报名长期课的用户使用。</div>
            </div>
        </div>

    </div>



    <div class="share-bg"></div>
    <div class="share">
        分享「100元4课时」
    </div>


    <div id="noShare" class="no-share">暂无推荐好友</div>
    <div  id="shareList" class="share-list" style="display: none;">
        <div class="bonus-count">
            已经推荐<span id="totalReferral">0</span>位好友( 累计获取 <span id="totalLesson">0</span> 课时)
        </div>

        <table class="share-detail-list" id="shareDetail">
            <thead>
                <tr>
                    <th>推荐用户</th>
                    <th>100元4课时</th>
                    <th>长期课</th>
                    <th>获赠课时<span class="user-status"></span></th>
                </tr>
            </thead>
            <tbody></tbody>

        </table>

        <div class="pagination" id="pagination">
            <div class="paging-left dis-paging">
                <i></i>
                <i></i>
            </div>

            <div class="paging-counter">
                <span class="current">0</span>
                <span>/</span>
                <span class="total">0</span>
            </div>

            <div class="paging-right ">
                <i></i>
                <i></i>
            </div>

        </div>

    </div>

    <div class="instruction">
        <div class="header">
            活动规则
        </div>

        <span>获赠课时限报名长期课的用户使用，未报名用户可在报名长期课后使用赠课。</span>
        <span>报名长期课指单次报名课时数≥40，包括报名长期课的团购活动。</span>
        <span>获赠课时使用情况可在公众号点击"预约上课"-"我的"-"我的课时"查看</span>
        <span>若推荐人退款长期课，久趣有权收回赠课。</span>
        <span>若被推荐用户退款，久趣有权收回推荐人的对应赠课。</span>
    </div>


<div class="not-qualify">
    <div class="explanation">

        <div class="top-banner">
            <img class="monkey" src="{{env('CDN_RESOURCE')}}/img/mobile/campaign/monkey.png">
            <img class="left"  src="{{env('CDN_RESOURCE')}}/img/mobile/campaign/left.png">
            <img class="right" src="{{env('CDN_RESOURCE')}}/img/mobile/campaign/right.png">
        </div>
        <span>很抱歉</span>
        <span>本次活动限报名了长期课的用户参加哦，如果您喜欢久趣，欢迎帮忙推荐给朋友。感谢您的支持!</span>

        <div class="reg-btn ok-btn" id="okBtn">确定</div>
    </div>
</div>


<div class="share-mask">
    <div class="share-arrow"></div>
</div>

<div id="alertBox" class="alert-box"></div>

<!--引入微信js-SDK-->
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src=" {{env('CDN_RESOURCE')}}/js/mobile/wx_config.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.2/weui.min.js"></script>

<script type="text/javascript" src="https://static-app.97kid.com/wx/js/zepto.min.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/Zepto_fx_methods.js"></script>

<script type="text/javascript"  src="{{env('CDN_RESOURCE')}}/js/mobile/login.js?v={{config('app.version')}}"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/AV.analytics.js"></script>

<script type="text/javascript">

  ;(function ($) {

    $(function () {

      //
      var pageSize = 5;
      var totalPage = 0;
      var currentPage = 1;
      var referrals = [];
      var buyerReferrals = [];
      var socials = [];
      var referralsResult = [];

      //获取分享并购买用户列表
      function getReferrals() {
          account.ajax({
              type: 'GET',
              path: '/s/students/referrals',
              success: function (result) {
                if (result && result.length) referrals = result;
                getBuyReferrals();
              },
              error: function (err) {
                  $.toastAlert(err.message,2);
              }
          });
      }

      //获取分享并购买用户列表
      function getBuyReferrals() {
        account.ajax({
          type: 'GET',
          path: '/s/reference/referrals',
          success: function (result) {
            buyerReferrals = result || [];
            var totalGiftLessons = 0;
            if (result && result.length) {
              for (var i = 0; i < result.length; i++) {
                totalGiftLessons += result[i].lessonCount * 1;
                if (referrals.indexOf(result[i].referralId) < 0) {
                  referrals.push(result[i].referralId);
                }
              }
            }
            $('#totalReferral').text(referrals.length);
            $('#totalLesson').text(totalGiftLessons);
            totalPage = Math.ceil(referrals.length / pageSize);

            referralsResult = [];
            getSocials(referrals, [], function (socials) {
              for (var j = 0; j < referrals.length; j++) {
                var id = referrals[j];
                var referral = {
                  id: id,
                  nickname: '',
                  avatar: '',
                  short: false,
                  long: false,
                  total: 0
                };
                for (var m = 0; m < buyerReferrals.length; m++) {
                  var buyerReferral = buyerReferrals[m];
                  if (id == buyerReferral.referralId) {
                    referral.total += buyerReferral.lessonCount;
                    if (buyerReferral.type == 1) {
                      referral.short = true;
                    } else if (buyerReferral.type == 2) {
                      referral.long = true;
                    }
                  }
                }
                for (var n = 0; n < socials.length; n++) {
                  var social = socials[n];
                  if (social.id == id) {
                    referral.nickname = social.nickname;
                    referral.avatar = social.avatar;
                  }
                }
                referralsResult.push(referral);
              }
              renderReferrals(currentPage);
            });
          },
          error: function (err) {
            $.toastAlert(err.message,2);
          }
        });
      }

      function getSocials(referrals, result, callback) {
        var tmp = [].concat(referrals);
        var ids = tmp.splice(0, 50);
        if (ids && ids.length) {
          account.ajax({
            type: 'GET',
            path: '/s/students/socials?ids=' + ids.join(','),
            success: function (res) {
              var tmpResult = [].concat(result, res || []);
              if (tmp && tmp.length) {
                getSocials(tmp, tmpResult, callback);
              } else {
                callback(tmpResult);
              }
            },
            error: function (err) {
              $.toastAlert(err.message,2);
            }
          });
        }
      }

      function renderReferrals(page) {
        var referralListHtml = '';
        if ((page - 1) * pageSize > referralsResult.length || page < 1) page = 1;
        for (var k = (page - 1) * pageSize; k < Math.min(page * pageSize, referralsResult.length); k++) {

          var referral = referralsResult[k];
          referralListHtml += '<tr class="share-item">'+
            '<td class="atr"><img src="'+ getAvatar(referral.avatar) +'"><div class="nick-name">'+referral.nickname+'</div></td>'+
            '<td>'+ ((referral.short === true)?'<div class="tick-icon "></div>':'')+'</td>'+
            '<td>'+ ((referral.long === true)?'<div class="tick-icon "></div>':'')+'</td>'+
            '<td>'+referral.total+'</td>'+
            '</tr>';

        }

        $('#shareDetail tbody').html(referralListHtml);

        if(referralsResult.length > 0) {

          $('#noShare').hide();
          $('#shareList').show();

          if( referralsResult.length <= pageSize) {
            $('#pagination').hide();
          } else {

            $('.paging-counter .current').text(1);
            if (referralsResult.length % pageSize > 0) {
              totalPage = parseInt(referralsResult.length / pageSize) + 1;
            } else {
              totalPage = parseInt(referralsResult.length / pageSize);
            }
            $('.paging-counter .total').text(totalPage);
          }
        } else {
          $('#noShare').show();
          $('#shareList').hide();
        }


      }

      function getAvatar(avatar) {
        if(!avatar) {
          return '{{env('CDN_RESOURCE')}}'+'/img/mobile/pic_avatar_boy.png';
        }
        return avatar;
      }

      var configOption = {
        timestamp: '{{$signature['timestamp']}}',
        nonceStr: '{{$signature['nonceStr']}}',
        signature: '{{$signature['signature']}}',
        jsApiList: ['onMenuShareTimeline', 'chooseWXPay', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone']
      };
      var wxconfig = new WxConfig(configOption);
      var account = new Account();
      account.getUserInfo(function(err,result){
        if(err) {
          $.toastAlert(err.message);
        } else {
          //配置微信分享接口
          wxconfig.activeShare(result.shareFlag);
          if(result.vip === 0) {
            $('.user-status').text('(待激活)');
          }
          else {
            $('.user-status').text('(可使用)');
          }
          //获取分享列表
          getReferrals();
        }

      });


      $('.share').click(function(){
        $('.share-mask').fadeIn();
      });

      $('.share-mask').click(function(){
        $(this).fadeOut();
      })

      $('#closeLogin').hide();


      //分页导航
      {
        $('.paging-left').on('touchstart', function () {
          $(this).addClass('paging-left-touch');
        });

        $('.paging-left').on('touchend', function () {
          $(this).removeClass('paging-left-touch');
        });

        $('.paging-right').on('touchstart', function () {
          $(this).addClass('paging-right-touch');
        });

        $('.paging-right').on('touchend', function () {
          $(this).removeClass('paging-right-touch');
        });

        $('.paging-left').click(function () {
          if (currentPage > 1) {
            currentPage--;
            $('.paging-counter .current').text(currentPage);
            if (currentPage === totalPage - 1) {
              $('.paging-right').removeClass('dis-paging');
            }
            if (currentPage === 1) {
              $('.paging-left').addClass('dis-paging');
            }
            renderReferrals(currentPage);
          }
        });


        $('.paging-right').click(function () {
          if (currentPage < totalPage) {
            currentPage++;
            $('.paging-counter .current').text(currentPage);
            if (currentPage === 2) {
              $('.paging-left').removeClass('dis-paging');
            }
            if (currentPage === totalPage) {
              $('.paging-right').addClass('dis-paging');
            }
            renderReferrals(currentPage);
          }

        })
      }
    })

  })(window.Zepto);

</script>

@include('template.ga')
</body>
</html>

